<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>paging</title>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
          type="text/css">
    <link rel="stylesheet" type="text/css" href="css/pageCss.css">
</head>
<body>
<div style="opacity: 0.7;" align="center" th:fragment="paging">
    <nav>
        <!--pageInfo.pages-4>=pageInfo.pageNum?-->
        <!--分页-->
        <ul class="pager">
            <li class="previous" th:classappend="${pageInfo.hasPreviousPage?'':'disabled'}"><a
                    style="color: black;" th:styleappend="${pageInfo.hasPreviousPage?'cursor: pointer;':''}"
                    th:onclick="hasPre([[${pageInfo.hasPreviousPage}]],[[${pageInfo.prePage}]],[[${url}]]);"><label
                    class="glyphicon glyphicon-arrow-left"></label>&nbsp;上一页</a></li>
            <li th:each="num:${#numbers.sequence(pageInfo.pageNum-4>0?pageInfo.pageNum+4>pageInfo.pages?pageInfo.pages-8:pageInfo.pageNum-4:1,pageInfo.pages-pageInfo.pageNum>4?pageInfo.pageNum-4<=0?9:pageInfo.pageNum+4:pageInfo.pages)}">
                <a style="color: black;"
                   th:styleappend="${num==pageInfo.pageNum?'background-color: #449d44':''}" th:text="${num}"
                   th:href="${url}+${num}"></a></li>
            <li class="next" th:classappend="${pageInfo.hasNextPage?'':'disabled'}">
                <a style="color: black;"
                   th:styleappend="${pageInfo.hasNextPage?'cursor: pointer;':''}"
                   th:onclick="hasNext([[${pageInfo.hasNextPage}]],[[${pageInfo.nextPage}]],[[${url}]]);">下一页&nbsp;<label
                        class="glyphicon glyphicon-arrow-right"></label></a></li>
        </ul>
    </nav>
</div>
</body>
</html>